<template>
	<view class="content">
		<view class="content-head">
			<view class="head">
				<view class="head-avater" @click="settingClick">
					<image class="image" :src="avatarUrl" mode="aspectFill" />
				</view>
				<view class="head-name" @click="settingClick">
					{{nickName}}
				</view>
			</view>
			<view class="edit">
				<view @click="settingClick">
					<van-icon name="setting-o" size="18" color="#fff" />
					<span class="edit-txt">设置</span>
				</view>
			</view>
		</view>
		<view class="myfunc cardBorder">
			<view class="myfunc-title">
				我的功能
			</view>
			<view class="myfunc-menus">
				<view class="myfunc-menus-menu" @click="menuClick">
					<van-icon name="records-o" size="30" color="#0749e4" />
					<view class="myfunc-menus-menu-name">
						{{'订单管理'}}
					</view>
				</view>
			</view>
		</view>
		<view class="contact cardBorder">
			<view class="contact-cell" v-for="i in contactList" :key="i.id" @click="cellClick(i)">
				<view class="contact-cell-left">
					<span>{{i.name}}</span>
					<span class="contact-cell-left-instruct">{{i.instruction}}</span>
				</view>
				<view class="contact-cell-right">
					<span class="contact-cell-right-name">{{i.rightName}}</span>
					<van-icon :name="i.icon" size="18" color="#0749e4" />
				</view>
			</view>
		</view>
		<view class="contact cardBorder" v-if="isLogin">
			<view class="contact-cell" @click="logOut">
				<view class="contact-cell-left logOut">
					<!-- <van-icon name="phone-o" size="18" color="#0749e4" /> -->
					<img class="iconImg" src="@/static/image/logOut.png" style="height: 20px;width: 20px;" alt="" />
					<span>退出登录</span>
				</view>
			</view>
		</view>
		<view v-else class="login">
			<van-button class="botBtn" round type="info" size="large" @click="login">立即登录</van-button>
		</view>
		<!-- <view class="content-map cardBorder">
			<map style="width: 100%; height: 360rpx;" :id="1" :latitude="latitude" :longitude="longitude"
				:markers="covers">
			</map>
			<view class="content-adress">
				地址：中国山东省滨州市博兴县纳利达路与汾王路交叉口东南60米
			</view>
		</view> -->
	</view>
	<float-drag></float-drag>
</template>

<script>
	import {
		getUserExistCode,
		getHomeMy,
		putUserSignOut
	} from '@/common/api.js'
	import FloatDrag from '../../components/float-drag.vue'
	import tool from "../../utils/common.js"

	export default {
		name: 'steelMine',
		components: {
			'float-drag': FloatDrag
		},
		data() {
			return {
				nickName: '',
				avatarUrl: '',
				id: 1, // 使用 marker点击事件 需要填写id
				// title: 'map',
				latitude: 37.042589,
				longitude: 118.277919,
				covers: [{
					id: 111,
					label: {
						content: "纳利达钢材交易大厅",
						bgColor: "#fff",
						padding: 8,
						borderRadius: 5,
						anchorX: -60,
						anchorY: -70
					},
					latitude: 37.042589,
					longitude: 118.277919,
					width: 21,
					height: 30,
					// iconPath: '../../static/image/icon_mine.png'
				}],
				contactList: [{
						id: 1,
						name: "服务热线",
						instruction: "（全天24小时）",
						rightName: "联系电话",
						icon: "phone-o",
					},
					{
						id: 2,
						name: "我要上库存",
						instruction: "（全天24小时）",
						rightName: "联系客服",
						icon: "service-o",
					},
				],
				authCode: '',
				phone: '',
				isLogin: false
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				this.isLogin = uni.getStorageSync('openId') ? true : false
				this.getPhone()
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						this.authCode = loginRes.code
						if (getApp().globalData.Nick_Name && getApp().globalData.Avatar) {
							this.nickName = getApp().globalData.Nick_Name
							this.avatarUrl = getApp().globalData.Avatar
							return
						}
						// 使用登录凭证获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: (infoRes) => {
								console.log(infoRes); // 打印用户信息
								console.log('用户昵称为: ' + infoRes.userInfo.nickName); // 打印用户昵称
								// 在这里，你可以将用户的头像和昵称保存到本地或者发送到后端进行处理
								// infoRes.userInfo.avatarUrl是用户的头像链接
								// infoRes.userInfo.nickName是用户的昵称
								if (!getApp().globalData.Nick_Name) {
									getApp().globalData.Nick_Name = infoRes.userInfo.nickName
								}
								if (!getApp().globalData.Avatar) {
									getApp().globalData.Avatar = infoRes.userInfo.Avatar
								}
								this.nickName = getApp().globalData.Nick_Name
								this.avatarUrl = getApp().globalData.Avatar
							}
						})
					}
				})
			},
			// 设置点击
			async settingClick() {
				if (!this.isLogin) {
					
					console.log('menu', this.authCode)
					const res = await getUserExistCode({
						code: this.authCode
					});
					if (res && res.openId) {
						getApp().globalData.sessionKey = res.sessionKey
						getApp().globalData.openId = res.openId
						console.log('res', res)
						if (!res.isLogined) {
							return uni.navigateTo({
								url: `../login/index`
							});
						} else {
							uni.setStorageSync('openId', res.openId)
						}
					}
				}
				// 跳转路由
				uni.navigateTo({
					url: `../mine/info`
				});
			},
			async menuClick() {
				if (!this.isLogin) {
					console.log('menu', this.authCode)
					const res = await getUserExistCode({
						code: this.authCode
					});
					if (res && res.openId) {
						getApp().globalData.sessionKey = res.sessionKey
						getApp().globalData.openId = res.openId
						console.log('res', res)
						if (!res.isLogined) {
							return uni.navigateTo({
								url: `../login/index`
							});
						} else {
							uni.setStorageSync('openId', res.openId)
						}
					}
				}
				// 跳转路由
				uni.navigateTo({
					url: `../market/mineOrder`
				});
			},
			cellClick(row) {
				if (row.id === 1) {

				}
				switch (row.id) {
					case 0:
						break;
					case 1:
						this.call(this.phone)
						break;
					case 2:
						this.jumpWx()
						break;
				}
			},
			call(phone) {
				tool.callPhone(phone)
			},
			jumpWx() {
				let val = {
					effectContent: 'addstock.png'
				}
				uni.navigateTo({
					url: `../home/addv?addvData=${JSON.stringify(val)}`
				});
			},
			async logOut() {
				uni.showModal({
					title: '退出登录',
					content: '您确定要退出当前登录账号吗？',
					success: async (res) => {
						console.log(res)
						if (res.confirm) {
							const res = await putUserSignOut()
							if (res.data) {
								uni.showToast({
									title: '退出登录成功',
									icon: 'none',
								})
								getApp().globalData.sessionKey = ''
								getApp().globalData.openId = ''
								uni.clearStorageSync();
								uni.removeStorageSync('openId')
								this.init()
							} else {
								uni.showToast({
									title: '退出登录失败',
									icon: 'none',
								})
							}
						} else if (res.cancel) {
							console.log('用户点击了取消');
						}

					}
				});
			},
			async login() {
				if (!this.isLogin) {
					console.log('menu', this.authCode)
					const res = await getUserExistCode({
						code: this.authCode
					});
					if (res && res.openId) {
						getApp().globalData.sessionKey = res.sessionKey
						getApp().globalData.openId = res.openId
						console.log(res)
						if (!res.isLogined) {
							return uni.navigateTo({
								url: `../login/index`
							});
						} else {
							uni.setStorageSync('openId', res.openId)
						}
					}
				}
			},
			async getPhone() {
				const res = await getHomeMy()
				if (res.data.contract) {
					getApp().globalData.Tel_Phone = res.data.contract
					this.phone = res.data.contract
					if (res.data.nickName) {
						getApp().globalData.Nick_Name = res.data.nickName
					}
					if (res.data.avatar) {
						getApp().globalData.Avatar = `${getApp().globalData.ImgAvatarDomain}${res.data.avatar}`
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
		background-color: #ececec;
		box-sizing: border-box;

		&-head {
			height: 300rpx;
			background-color: #0749e4;
			color: #fff;
			width: 100%;
			display: flex;

			.head {
				height: 100px;
				// width: 100%;
				flex: 1;
				padding: 0 10px;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				&-avater {
					height: 65px;
					width: 65px;
					border-radius: 50%;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 10px;

					.image {
						height: 60px;
						width: 60px;
						border-radius: 50%;
						background-color: #eee;
					}
				}

				&-name {
					font-size: 16px;
				}
			}

			.edit {
				font-size: 15px;
				// position: absolute;
				// top: 10px;
				// right: 10px;
				display: flex;
				align-items: center;
				height: 100px;
				padding-right: 10px;

				&-txt {
					margin-left: 5px;
				}
			}
		}

		.myfunc {
			margin-top: -50px;
			box-sizing: border-box;
			padding: 15px 20px;

			&-menus {
				margin-top: 20px;
				display: flex;
				align-items: center;
				font-size: 14px;
				color: #8b8b8b;

				&-menu {
					width: 85px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					text-align: center;

					&-name {
						margin-top: 10px;
					}
				}
			}
		}

		&-map {
			// margin: 50rpx 30rpx 40rpx;
			padding: 10px;
			// width: 100%;
			box-sizing: border-box;
			background-color: #fff;
			overflow: hidden;
		}

		&-adress {
			color: #6d6d6d;
			margin: 40rpx 30rpx 0;
			text-align: center;
		}

		&-btn {
			margin: 60rpx 30rpx 40rpx;
			display: flex;
			justify-content: space-around;
			color: #fff;

			.btn {
				height: 70rpx;
				// width: 240rpx;
				width: 300rpx;
				text-align: center;
				line-height: 70rpx;
				border-radius: 35rpx;
				background-color: #0749e4;
			}

			.btn:active {
				opacity: 0.7;
			}
		}

		.contact {
			margin-top: 10px;
			box-sizing: border-box;
			padding: 5px 20px;

			&-cell {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50px;
				border-bottom: 1px solid #ebebeb;

				&-left {
					&-instruct {
						margin-left: 5px;
						font-size: 13px;
						color: #8b8b8b;
					}
				}

				&-right {
					text-align: right;

					&-name {
						margin-right: 5px;
						font-size: 14px;
						color: #0749e4;
					}
				}

				.logOut {
					display: flex;
					align-items: center;

					.iconImg {
						margin-right: 10px;
					}
				}
			}

			&-cell:last-child {
				border-bottom: none;
			}
		}
	}

	.login {
		margin: 15px 10px;
	}

	.botBtn {
		width: 90%;
		height: 45px;
		line-height: 45px;
		margin: 0 auto;
	}

	.cardBorder {
		box-sizing: border-box;
		border-radius: 20rpx;
		overflow: hidden;
		margin-top: 30rpx;
		background-color: #fff;
		margin: 15px 10px;
	}
</style>